﻿		<html><head><meta charset="UTF-8">
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
		<script src="https://cdn.ckeditor.com/ckeditor5/10.0.0/classic/ckeditor.js"></script>
		
		 <script type="text/javascript">
		 var theEditor;
               var thefile;


	function addTo(){
	  
		  ReadDataFile2(thefile);
	}


	
	function ReadDataFile2(file)
	{
	    var reader = new FileReader();
    

      reader.readAsDataURL(file); 
	      reader.onload=function(e)
		 { 

            /*  alert(2);
	  $('body').append('<img src="' + this.result + '">' );
	  */var suffix = file.name.split('.').pop();
	  if (/^jpg|png|gif|jpeg$/i.test(suffix))
	  {
	  	  theEditor.setData(theEditor.getData()+ '<img src="' + this.result + '">'); 
    theEditor.setData(theEditor.getData()+ '<p></p>'); 
	  }else
               alert('is not a image/不是圖片檔/不是图片文件');

		}
	}	
	
	function submitcontent()
	{
	//this function for post editor content to server
	alert(theEditor.getData());
	/*以下是两个post的参考例子  example for post 
	var fd = new FormData(theEditor.getData());
fd.append("CustomField", "This is some extra data");
$.ajax({
  url: "xxx.php",
  type: "POST",
  data: fd,
  processData: false,  // 不处理数据
  contentType: false   // 不设置内容类型
});


        $.ajax({
            url:'xxx.php',
            data:theEditor.getData(),
            type:'post',
            dataType:'text',
            success:function(msg){
                if(msg=='1'){
                    console.log('添加成功');
                }else{
                    console.log('添加失败')
                }
            }
             
        })
	*/
	}



		 </script>  
		
		</head>

		<body>
		
		
		<textarea name="content" id="editor">This is some sample content.</textarea>
			<script>
			ClassicEditor
				.create( document.querySelector( '#editor' ) )
				.then( editor => {
				theEditor=editor;
        
        try
  {
  
    editor.plugins.get( 'FileRepository' ).createUploadAdapter  = function( loader ) {
   /* alert(loader.file.name);*/
   thefile=loader.file;
    
    $('#cl1').click();
    
  return loader.file;
};/**/
  
  }
catch(err)
  {
  
  }
       
					//console.log( editor );
				} )
				.catch( 
        //error => {
					
         // console.error( error );
          
				//} 
        );
			
	
		</script>
		<button id="cl1" type='submit' onclick='addTo()' style="display:none;">don't show me </button>
		<button id="cl1" type='submit' onclick='submitcontent()' >submit</button>
		</body>
		</html>